<template>
  <view>
    <view class="nav"></view>
    <view class="top">
      <view class="search" @tap="search" :style="{top:`${searchTop}rpx`,transform:`scale(${scaleNum})`}">
        <text class="icon-search iconfont"></text>搜索职位、公司
      </view>
    </view>
    <scroll-view scroll-x="true">
      <view class="scroll-x">
        <grid-item v-for="item in scrollXList" :key="item.id" :className="item.class" :title="item.title"></grid-item>
      </view>
    </scroll-view>
    <view class="home-near">
      <view class="nearby">
        <text>查看『家附近』去的工作机会</text>
        <view class="near">
          <view class="item">5km内</view>
          <view class="item">骑行15分钟</view>
          <view class="item">公交10分钟</view>
        </view>
      </view>
    </view>

    <view class="work">
      <view class="title">
        <view class="title-inner">
          <text>web前端</text>
          <text class="iconfont icon-write"></text>
        </view>
      </view>
      <work-item v-for="item in jobList" :key="item.job_id" :item="item" :tags="item.tags.split(',')"></work-item>
    </view>
  </view>
</template>

<script>
  import {BASE_URL} from '../../utils/index.js'
  let _this
  export default {
    data() {
      return {
        //后面加路径
        scrollXList: [{
            id: 1,
            title: '附近工作',
            class: 'iconfont icon-position'
          },
          {
            id: 2,
            title: '热门兼职',
            class: 'iconfont icon-ptJob'
          },
          {
            id: 3,
            title: '最新发布',
            class: 'iconfont icon-new'
          },
          {
            id: 4,
            title: '行业图谱',
            class: 'iconfont icon-hytp'
          },
          {
            id: 5,
            title: '更多服务',
            class: 'iconfont icon-more'
          },
          {
            id: 6,
            title: '高薪优选',
            class: 'iconfont icon-gxyx'
          },
          {
            id: 7,
            title: '热门公司',
            class: 'iconfont icon-rmgs'
          },
          {
            id: 8,
            title: '职位分类',
            class: 'iconfont icon-zwfl'
          },
          {
            id: 9,
            title: '学生专区',
            class: 'iconfont icon-xszq'
          },
          {
            id: 10,
            title: '查工资',
            class: 'iconfont icon-cgz'
          },
        ],
        scaleNum: 1, //搜索框缩放
        searchTop: 146,
        jobList:[],
      }
    },
    onLoad() {
      _this = this
    },
    onReady() {
      this.getJobItem()
    },
    methods: {
      search() {
        console.log("搜索",this.jobList)
      },
      getJobItem() {
        console.log(123)
        uni.request({
          //查询参数offset，为15的倍数
          url:`${BASE_URL}/jobs/jobItem?offset=0`,
          success(res) {
            if(res.data.code!==200) return
            _this.jobList=res.data.data
          },
          fail(err) {
            console.log(err)
          }
        })
      }
    },
    onPageScroll(res) {
      if (res.scrollTop > 60) {
        //防止滑动太快出现的res.scrollTop的值全部大于60
        this.searchTop = 56
        this.scaleNum = 0.6
        return
      }
      this.searchTop = 146 - res.scrollTop * 1.5
      if (1 - res.scrollTop / 60 >= 0.6) {
        this.scaleNum = 1 - res.scrollTop / 60
      } else {
        this.scaleNum = 0.6
      }
      uni.$emit('onPageScroll', res.scrollTop);
    },
  }
</script>

<style lang="scss">
  page {
    background: $uni-bg-color-grey;
  }

  .nav {
    width: 750rpx;
    height: 146rpx;
    background: $uni-color-primary;
    position: fixed;
    top: var(--window-top);
    left: 0;
    z-index: 2;
  }

  .top {
    height: 118rpx;
    padding-top: 146rpx;
    background: $uni-color-primary;

    .search {
      width: 678rpx;
      padding-left: 36rpx;
      border-radius: 50rpx;
      background: $uni-bg-color;
      height: 80rpx;
      color: #AAAAAA;
      line-height: 80rpx;
      font-size: 34rpx;
      font-weight: bold;
      position: fixed;
      left: 18rpx;
      // left: -104rpx;
      z-index: 2;

      .icon-search {
        margin-right: 20rpx;
      }
    }
  }

  .scroll-x {
    width: 1500rpx;
    display: flex;
    align-items: center;
    height: 214rpx;
    flex-wrap: nowrap;
    flex-direction: row;
    background: $uni-bg-color;
  }

  .home-near {
    background: $uni-bg-color;
    height: 180rpx;
    margin-bottom: 10rpx;

    .nearby {
      width: 670rpx;
      margin: auto;
      background: #F6F7FB;
      padding-top: 30rpx;
      border-radius: 20rpx;
      padding-bottom: 20rpx;

      text {
        font-weight: bold;
        margin-left: 30rpx;
      }

      .near {
        display: flex;
        justify-content: space-around;
        margin-top: 18rpx;

        .item {
          width: 190rpx;
          background: $uni-bg-color;
          border-radius: 20rpx;
          height: 56rpx;
          line-height: 56rpx;
          text-align: center;
          font-size: 26rpx;
          color: $uni-text-color-grey;
        }
      }
    }
  }

  .work {
    width: 750rpx;

    .title {
      background: $uni-bg-color;

      .title-inner {
        width: 680rpx;
        height: 120rpx;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid $uni-bg-color-grey;

        text {
          font-size: 42rpx;
          font-weight: bold;
        }
      }
    }

  }
</style>
